<template>
  <div class="model">
    <div class="item">
      <image class="icon" src="/static/images/icon/rl.png" />
      <div class="info date-info">
        <div>
          <div class="date">
            {{ dayjs(orderInfo.enterDate).format('MM月DD日') }}
            {{ dateTransformText(orderInfo.enterDate) }}
          </div>
          <div class="tip">14:00后入住</div>
        </div>
        <div class="night">{{ getRoomNight(orderInfo.enterDate, orderInfo.leaveDate) }}晚</div>
        <div>
          <div class="date">
            {{ dayjs(orderInfo.leaveDate).format('MM月DD日') }}
            {{ dateTransformText(orderInfo.leaveDate) }}
          </div>
          <div class="tip">12:00前离店</div>
        </div>
      </div>
    </div>
    <div class="item">
      <image class="icon" src="/static/images/icon/chuang.png" />
      <div class="info room-info">
        <div class="name">{{ orderInfo.layoutName }} 1间</div>
        <div class="text">{{ layoutInfo.remark }}</div>
      </div>
    </div>
    <div class="item">
      <image class="icon" src="/static/images/icon/pr.png" />
      <div class="info room-info">
        <div class="name">无餐食</div>
      </div>
    </div>
    <div class="item">
      <image class="icon" src="/static/images/icon/zzxx.png" />
      <div class="info room-info">
        <div class="name">入住信息</div>
        <div class="info-list">
          <div class="info-item">
            <div class="label">入住人</div>
            <div class="value">{{ orderInfo.leader }}</div>
          </div>
          <div class="info-item">
            <div class="label">手机号</div>
            <div class="value">{{ desensitizePhone(orderInfo.phone) }}</div>
          </div>
          <div class="info-item">
            <div class="label">订单号</div>

            <div class="value">
              {{ orderInfo.id }}
              <span class="i-carbon-copy copy active" @click="copyText(orderInfo.id)"></span>
            </div>
          </div>
          <div class="info-item">
            <div class="label">下单时间</div>
            <div class="value">{{ orderInfo.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="model">
    <div class="title">
      <div>发票信息</div>
      <div
        class="right active"
        @click="to('/pages-sub/hotel/invoice/index', { phone: layoutInfo.phone })"
      >
        <span>开发票</span>
        <span class="i-carbon-chevron-right icon"></span>
      </div>
    </div>
    <div class="tip-text">请到民宿前台索取发票，可提交普票</div>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
import { to } from '@/utils/page'
import { dateTransformText, getRoomNight } from '@/components/Calendar/utils'
import { msgSuccess, desensitizePhone } from '@/utils/index'

defineOptions({ name: 'OrderInfo' })

defineProps(['orderInfo', 'layoutInfo'])

function copyText(text) {
  uni.setClipboardData({
    data: text,
    success() {
      msgSuccess('复制成功')
    },
  })
}
</script>
<style lang="scss" scoped>
.model {
  padding: 40rpx 30rpx;
  .item {
    display: flex;
    margin-bottom: 56rpx;
    .icon {
      width: 34rpx;
      height: 34rpx;
    }
    .info {
      flex: 1;
      margin-left: 14rpx;
      &.date-info {
        display: flex;
        color: var(--color1);
        .date {
          font-size: 30rpx;
          font-weight: 700;
          line-height: 32rpx;
          color: var(--color1);
        }
        .tip {
          margin-top: 10rpx;
          font-size: 27rpx;
          line-height: 38rpx;
          color: var(--color4);
        }
        .night {
          display: flex;
          align-items: center;
          height: 34rpx;
          padding: 0 16rpx;
          margin: 0 16rpx;
          font-size: 23rpx;
          border: 1px solid #c2c5cc;
          border-radius: 18rpx;
        }
      }
      &.room-info {
        color: var(--color1);
        .name {
          font-size: 30rpx;
          font-weight: 700;
          line-height: 32rpx;
        }
        .text {
          margin-top: 10rpx;
          font-size: 27rpx;
          line-height: 38rpx;
          color: var(--color4);
        }

        .info-list {
          margin-top: 12rpx;
          .info-item {
            display: flex;
            margin-top: 6rpx;
            font-size: 27rpx;
            line-height: 57rpx;
            color: var(--color1);
            .label {
              width: 200rpx;
              color: var(--color4);
            }
            .copy {
              font-size: 23rpx;
              color: var(--color4);
              vertical-align: middle;
            }
          }
        }
      }
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10rpx 0;
    font-weight: 700;
    color: var(--color1);
    .right {
      display: flex;
      align-items: center;
      font-size: 27rpx;
      font-weight: 500;
      color: var(--sc1);
      .icon {
        margin-left: 6rpx;
        font-size: 32rpx;
      }
    }
  }
  .tip-text {
    margin-top: 30rpx;
    font-size: 27rpx;
    color: var(--color4);
  }
}
</style>
